<html>
    <head>
        <title>打地鼠</title>
        <meta charset="utf-8">
        <script src="jquery.js"></script>
        <style>
            body{
                margin: 0;
                background-image: url(image/bg.jpg);
                cursor: url(image/cursor.png), auto;
            }
            table{
                width: 600px;
                height: 600px;
                margin: auto;
            }
            td{
                height: 150px;
                background-image: url(image/hole.png);
                background-size: 120px 50px;
                background-repeat: no-repeat;
                background-position: center bottom;
                text-align: center;
                vertical-align: bottom;
            }
            img{
                width: 80px;
                height: 0;
                position: relative;
                bottom: 8px;
                animation-timing-function: linear;
                /*animation-fill-mode规定动画在播放之前或之后，其动画效果是否可见*/
                animation-fill-mode: both;
            }
            .mouseUp{
                animation-name: up;
                animation-duration: 0.3s;
            }
            .mouseDown{
                animation-name: down;
                animation-duration: 0.1s;
            }
            /*地鼠消失的动画*/
            @keyframes down{
                0%{height: 70px;}
                100%{height: 0;}
            }
            @keyframes up{
                0%{height: 0;}
                100%{height: 70px;}
            }
            #score{
                font-size: 30px;
                position: absolute;
                top: 50px;
                background-color: rgba(100, 100, 100, 0.6);
                line-height: 50px;
                padding-left: 50px;
                padding-right: 15px;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
            }
        </style>
    </head>
    <body>
        <audio src="audio/music.mp3" autoplay loop></audio>
        <audio id="dazhong"></audio>
        <p id="score">得分：0</p>
        <table>
            <tr>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
            </tr>
            <tr>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
            </tr>
            <tr>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
            </tr>
            <tr>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
                <td><img src="image/mouse.png"></td>
            </tr>
        </table>
        <script>
            var score = 0;
            var mouses = $('img');
            // 跳出一个地鼠，过一会儿隐藏
            function show(){
                var a = Math.floor(Math.random() * 16);//数量随机产生
                var mouse = mouses.get(a);
                $(mouse).addClass('mouseUp').removeClass('mouseDown');
                function hide(){
                    $(mouse).addClass('mouseDown').removeClass('mouseUp');
                }
                // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
                setTimeout(hide, 2500);
            }
            // 跳出一批地鼠
            function play(){
                show();
                show();
                show();
                show();
            }
            // 每隔一段时间跳出一批地鼠
            setInterval(play, 2000);
            
            // 打中地鼠
            $('img').click(function(){
                $(this).addClass('mouseDown').removeClass('mouseUp');
                score = score + 10;
                // 设置id=score的标签的文本内容(在这里指的是p标签)
                $('#score').text('得分：' + score);
                $('#dazhong').attr('src', 'audio/dazhong.wav').get(0).play();
            });
//            鼠标指针的变化
            $('body').mousedown(function(){
                $('body').css('cursor', 'url(image/cursor-down.png), auto');
            }).mouseup(function(){
                $('body').css('cursor', 'url(image/cursor.png), auto');
            });
        </script>
    </body>
</html>